<template>
    <div class="myTab" @click="choseTab">
        <slot></slot>
    </div>
</template>
<script>
export default {
    props: {
        value: Number || String // vue2 v-model绑定的属性就是value
    },

    created() {
        this.$nextTick(() => {
            let list = document.querySelector('.myTab').querySelectorAll('.myTabItem')
            list[this.value].className = 'myTabItem active'
        })
    },

    methods: {
        choseTab(e) {
            if(e.target.className.includes('myTabItem')) {
                let list = document.querySelector('.myTab').querySelectorAll('.myTabItem')
                for(let i = 0; i<list.length; i++) {
                    list[i].className = 'myTabItem'
                }
                e.target.className = 'myTabItem active'
            }
        }
    }
}
</script>

